<template>
  <div>
    <div v-if="componentIs('regional-list')" class="mod-config" id="mod-config-id">
      <div v-if="isAuth('regionList:paging')" class="div-s" id="div-s-id">
        <el-form :model="params" :label-position="labelPosition" ref="paramsRefs" :inline="true" label-width="70px" class="queryFormed">
          <el-row class="row-s">
            <el-col class="col-center"  :span="6">
              <el-form-item label="信用代码" prop="certificateCode">
                <el-input v-model="params.certificateCode" placeholder="请选择统一社会信用代码" @clear="clearCertificateCode" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col class="col-center" :span="6">
              <el-form-item  label="企业名称" prop="name">
                <el-input v-model="params.name"  placeholder="请输入企业名称" @clear="clearName" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col class="col-center" :span="6">
              <el-form-item  label="所在区域">
                <el-select v-model="areaSelectValue" placeholder="请选择区域"  @clear="clearArea" @focus="showSelectAreaDialog" clearable no-data-text=" ">
                </el-select>
              </el-form-item>
            </el-col>
            <el-col  :span="6" class="col-right">
              <el-form-item  label="区域销售">
                <el-select v-model="employeeSelectValue" placeholder="请选择部门/人"  @clear="clearEmployee"  @focus="showSelectEmployeeDialog(2)"  clearable no-data-text=" "></el-select>
              </el-form-item>
            </el-col>

            <el-col v-if="userInfo.managerFlag === 1 " :span="6">
              <el-form-item  label="部门销售">
                <el-select v-model="params.saleId" placeholder="请选择销售"  @clear="clearSale" @change="clickSearch"    clearable>
                  <el-option
                    v-for="item in saleOptions"
                    :key="item.id"
                    :label="item.nickName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="col-center" :span="6">
              <el-form-item label="资质项" prop="">
<!--                <el-tree-select
                  style="width:100%"
                  :data="qualiTreeList"
                  v-model="params.qualiIdList"
                  node-key="id"
                  placeholder="请选择资质项"
                  @focus="getQualiTreeReq"
                  show-checkbox
                />-->

                <el-select v-model="selectedQuailName" class="multipleSelectStyle"  placeholder="请选择资质项" @clear="clearQuail" multiple collapse-tags clearable>
                  <el-option value=""  style="height: 550px;overflow: auto;background-color: #FFFFFF;padding: 0px;width: 450px">
                    <el-tree  :data="qualiTreeList"
                              :props="qualiTreeProps"
                              node-key="id"
                              ref="qualiTreeRefs"
                              @check-change="qualiTreeCheckChange"
                              style="width: 100%;"
                              show-checkbox>

                    </el-tree>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="col-center" :span="6" >
              <el-form-item prop="regularFlag" label="老客户">
<!--                <el-checkbox v-model="params.regularFlag" :true-label="1" :false-label="0" @change="clickSearch">老客户</el-checkbox>-->
                <el-select v-model="params.regularFlag" placeholder="是否为老客户" @change="clickSearch">
                  <el-option
                    v-for="item in oldCustomerOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="col-right" :span="6" :offset=" userInfo.managerFlag === 1 ? 0 : 6">
              <el-form-item class="item-all">
                <el-button class="buttonItem" size="mini" plain @click="clickReset()">重 置</el-button>
                <el-button class="buttonItem" size="mini" type="primary" @click="clickSearch()">搜 索</el-button>
<!--                <el-button v-if="!isUnfold" @click="turnFoldState" type="text">展开<i
                  class="el-icon-arrow-down zhankai"></i></el-button>
                <el-button v-if="isUnfold" @click="turnFoldState" type="text">收起<i class="el-icon-arrow-up zhankai"></i>
                </el-button>-->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="div-e" id="div-e-id">
        <div class="div-inquire" id="div-inquire-id">
          <div class="in-t">
            <div class="in-ts"></div>
            <h3>区域名单</h3>
          </div>
          <div  class="div-button">
            <batch-import :type="3" :customerType="3" v-if="isAuth('regionList:import')" @refreshData="refreshData"></batch-import>
<!--            <el-button v-if="isAuth('ent:customer:personImport') || isAuth('ent:customer:entImport')" size="mini" type="primary" icon="el-icon-download">批量导入</el-button>-->
            <el-button v-if="isAuth('regionList:export')" size="mini" type="primary" icon="el-icon-upload2" @click="clickExport">数据导出</el-button>
<!--            <el-button size="mini" type="primary" icon="" @click="showSelectEmployeeTransferDialog" :disabled="customerIdList.length < 1">批量转让</el-button>-->
            <el-button v-if="isAuth('regionList:save')" size="mini" type="primary" icon="el-icon-plus" @click="showAddOrUpdateComp(true,'region-list-add-or-update')">新增</el-button>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          :max-height="table.tableHeight"
          :header-cell-style="{background:'#F5F7FA'}"
          :cell-style="{'border-right': 'none','border-left': 'none'}"
          style="width: 100%"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
          border>
<!--          <el-table-column
            fixed
            type="selection"
            width="55">
          </el-table-column>-->
          <el-table-column
            fixed
            label="序号"
            type="index"
            width="50"
          align="center">
          </el-table-column>
          <el-table-column
            fixed
            prop="areaName"
            label="展示区域"
            width="100"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            fixed
            label="公司名称"
            prop="name"
            width="280"
            align="center"
          show-overflow-tooltip>
          </el-table-column>
<!--          <el-table-column
            fixed
            label="信用代码"
            prop="certificateCode"
            align="center">
          </el-table-column>-->
<!--          <el-table-column
            prop="addressDetail"
            label="地址"
            align="center"
            show-overflow-tooltip>
          </el-table-column>-->
          <el-table-column
            prop="contactsName"
            label="联系人"
            width="80"
            align="center"
          show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="contactsPosition"
            label="职位"
            width="80"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
<!--          <el-table-column
            prop="contactsMobile"
            label="电话号码"
            width="125"
            align="center">
          </el-table-column>-->
          <el-table-column
            prop="qualiNames"
            label="资质"
            min-width="125"
            align="center"
          show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="regularFlag"
            label="是否老客户"
            width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.regularFlag === 1 ? '是' : '否'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="saleNames"
            label="区域销售"
            width="90"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
            <el-table-column
              prop=""
              label="跟进人"
              width="80"
              align="center"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.typeId === 1 ? scope.row.followUserName : ''}}
              </template>
            </el-table-column>
<!--          <el-table-column
            prop="remark"
            label="备注"
            width="150"
            align="center"
          show-overflow-tooltip>
          </el-table-column>-->
          <el-table-column
          prop="lastFollow"
          label="最新跟进"
          align="center"
          min-width="200"
          show-overflow-tooltip>

          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            min-width="110">
            <template slot-scope="scope">
              <el-button type="text" size="mini" style="color: #66b1ff" @click="clickShowDetails('regional-list-details',scope.row)">跟进</el-button>
              <span v-if="scope.row.typeId !== 1" style="color:#E8E8E8;">|</span>
              <el-popover
                v-if="scope.row.typeId !== 1"
                placement="bottom"
                :visible-arrow="false"
                popper-class="popper-style">
                <div style="text-align: center; margin: 0; display: flex;flex-direction: column;font-size: 12px">
                  <div @click="showTurnToFinishDialog(scope.row)" class="popover-item" v-if="scope.row.typeId === 2 || scope.row.typeId === 3">转成交</div>
                  <div @click="turnToPossible(scope.row)" class="popover-item" v-if="scope.row.typeId === 3">转意向</div>
                  <div @click="clickDelete(scope.row)" class="popover-item" v-if="isAuth('regionList:delete')">删除</div>
                </div>
                    <el-button  type="text" size="mini"  slot="reference" @click="" style="color: #66b1ff"  >更多<i class="el-icon-arrow-down"></i></el-button>
              </el-popover>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="changePageSize"
          @current-change="turnToPage"
          :current-page="queryInfo.pageIndex"
          :page-sizes="[5, 10, 20, 50, 100, 200]"
          :page-size="queryInfo.pageSize "
          layout="total, prev, pager, next, sizes, jumper"
          :total="totalPage"
          id="div-e-paging-id">
        </el-pagination>
      </div>
      <el-dialog
        title=""
        :visible.sync="selectEmployeeDialogVisible"
        top="20vh"
        width="35%">
      <h3 slot="title">
        选择部门/人
      </h3>
        <div style="border: 1px solid #DDDDDD;border-radius: 2px;height: 30vh;overflow: auto;margin: 0 40px 28px 40px;padding: 13px 20px">
          <el-tree :data="employeeTreeList" ref="employeeQueryTreeRefs" :props="defaultProps" @node-click="employeeHandleNodeClick "></el-tree>
        </div>
        <span style="display: flex;justify-content: center;">
        <el-button @click="selectEmployeeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickSelectEmployeeSearch">确 认</el-button>
      </span>
      </el-dialog>
      <el-dialog
        title=""
        :visible.sync="selectEmployeeTransferDialogVisible"
        width="20%">
      <span slot="title">
        选择部门/人
      </span>
        <div style="border: 1px solid #DDDDDD;border-radius: 2px;height: 354px;margin-bottom: 28px;overflow: auto">
          <el-tree :data="employeeTreeList" ref="employeeTransferTreeRefs" :props="defaultProps" @node-click="employeeTransferHandleNodeClick "></el-tree>
        </div>
        <span style="display: flex;justify-content: center;">
        <el-button @click="selectEmployeeTransferDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickConfirmTransfer">确 认</el-button>
      </span>
      </el-dialog>
      <el-dialog
        title=""
        :visible.sync="selectAreaDialogVisible"
        top="20vh"
        width="35%">
      <h3 slot="title">
        选择地区
      </h3>
        <div style="border: 1px solid #DDDDDD;border-radius: 2px;height: 30vh;overflow: auto;margin: 0 40px 28px 40px;padding: 13px 20px">
          <el-tree :data="areaTreeList" :props="areaTreeProps" @node-click="areaHandleNodeClick" ></el-tree>
        </div>
        <span style="display: flex;justify-content: center;">
        <el-button @click="selectAreaDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickSelectAreaSearch">确 认</el-button>
      </span>
      </el-dialog>
<!--            <el-dialog
        title="提示"
        :visible.sync="cooperationDialogVisible"
        width="30%">
        <span slot="title">合作记录</span>
        <div>
          <el-form :model="cooperationForm" :rules="cooperationrules" ref="cooperationForm" label-width="100px">
            <el-form-item label="公司名称" prop="name">
              <el-input v-model="cooperationForm.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="合同简述" prop="description">
              <el-input v-model="cooperationForm.description" placeholder="请输入合同内容简述"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="typeId">
              <el-select style="width: 100%" v-model="cooperationForm.typeId" placeholder="请选择类型">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="进款金额" prop="income">
              <el-input v-model="cooperationForm.income" placeholder="请输入进款金额"></el-input>
            </el-form-item>
            <el-form-item label="业绩金额" prop="perfor">
              <el-input v-model="cooperationForm.perfor" placeholder="请输入业绩金额"></el-input>
            </el-form-item>
            <el-form-item label="进款时间" prop="incomeDate">
              <el-date-picker type="date"
                              value-format="yyyy-MM-dd"
                              v-model="cooperationForm.incomeDate"
                              placeholder="选择日期"
                              style="width: 100%"></el-date-picker>
            </el-form-item>
&lt;!&ndash;            <el-form-item label="合作明细" >
              <el-input v-model="cooperationForm.detail" placeholder="请输入明细"></el-input>
            </el-form-item>&ndash;&gt;
            <el-form-item label="合同文件" prop="">
              <el-upload
                :action="uploadUrl()"
                multiple
                :headers="uploadHeader()"
                :on-success="successUpload"
                :on-change="changeUpload"
                :file-list="cooperationForm.fileList"
                accept=".pdf">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cooperationDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="clickUpdate">确 定</el-button>
  </span>
      </el-dialog>-->
    </div>
    <region-list-add-or-update v-if="componentIs('region-list-add-or-update')" :isAdd="isAdd" @changeComponent="changeComponent"></region-list-add-or-update>
    <regional-list-details v-if="componentIs('regional-list-details')" @changeComponent="changeComponent" :id="id"></regional-list-details>
    <add-cooperation-dialog :id="cooperationForm.customerId" :name="cooperationForm.name" @dialogVisibleChange="cooperationDialogVisibleChange" :dialog-visible="cooperationDialogVisible" @refreshData="refreshData"></add-cooperation-dialog>
  </div>

</template>

<script>
import BasePaging from '../../common/BasePaging'
import RegionListAddOrUpdate from './regionalListComponent/region-list-add-or-update'
import RegionalListDetails from './regionalListComponent/regional-list-details'
import {getDepartTree} from '../../../api/depart'
import {isAuth} from '../../../utils'
import {customerExport, incomeType} from '../../../api/customer/enterprise'
import Vue from 'vue'
import BatchImport from './Component/BatchImport'
import ElTreeSelect from '../../../components/treeSelect/index'
import {
  deleteCustomer,
  transferBatch,
  turnToFinish,
  turnToPossible,
  addCooperation,
  getQualiTree
} from '../../../api/customer/regionalList'
import {getRegionTree} from '../../../api/customer/region'
import {getUserInfo} from '../../../api/sys'
import {getUserList} from '../../../api/user'
import AddCooperationDialog from './Component/AddCooperationDialog'

export default {
  name: 'regional-list',
  components: {AddCooperationDialog, BatchImport, RegionalListDetails, RegionListAddOrUpdate, ElTreeSelect},
  extends: BasePaging,
  created () {
    if (isAuth('regionList:paging')) { this.paging() }
    this.getUserInfoReq()
    this.getQualiTreeReq()
    this.getSaleListReq()
  },
  mounted () {
    // if (isAuth('ent:area:paging')) { this.paging() }
  },
  data () {
    return {
      // 测试状态
      testFalse: false,
      // 控制组件显示 regional-list,region-list-add-or-update,regional-list-details
      componentFlag: 'regional-list',
      id: 0,
      isPaging: true,
      isAddOrUpdate: false,
      bodyHeight: 0,
      searchHeight: 0,
      userInfo: {},
      inqerts: false,
      selectedQuailName: '',
      oldCustomerOptions: [{name: '全部', value: null}, {name: '是', value: 1}, {name: '否', value: 0}],
      params: {
        // deptId和followUserId使用employeeId
        employeeId: '',
        // city和area统一使用areaId字段
        areaId: '',
        // companyName: '',
        deptId: '',
        areaSaleDeptId: null,
        followUserId: null,
        name: '',
        certificateCode: '',
        regularFlag: null,
        saleId: null,
        areaSaleId: null,
        qualiIdList: [],
        gradeTagList: []
      },
      cooperationForm: {
        'name': '',
        'customerId': '',
        'description': '',
        'income': '',
        'incomeDate': '',
        'detail': '',
        'perfor': '',
        'typeId': 1,
        'fileName': '',
        'fileUrl': '',
        'fileList': []
      },
      cooperationrules: {
        description: [{ required: true, message: '请输入合同简介', trigger: 'blur' }],
        income: [{ required: true, message: '请输入进款金额', trigger: 'blur' }],
        incomeDate: [{ required: true, message: '请选择进款时间', trigger: 'change' }],
        perfor: [{ required: true, message: '请选择业绩金额', trigger: 'blur' }],
        typeId: [{ required: true, message: '请选择类型', trigger: 'change' }]
  /*      detail: [{ required: true, message: '请输入合作明细', trigger: 'blur' }] */
      },
      employeeId: '',
      labelPosition: 'left',
      dataListLoading: false,
      cooperationDialogVisible: false,
      selectEmployeeDialogVisible: false,
      selectAreaDialogVisible: false,
      selectEmployeeTransferDialogVisible: false,
      addOrUpdateVisible: false,
      employeeSelectValue: '',
      areaSelectValue: '',
      // 合作记录类型
      // typeOptions: [{id: 1, name: '进款'}, {id: 2, name: '退款'}, {id: 3, name: '挂靠'}],
      typeOptions: [],
      // table多选用户列表
      customerIdList: [],
      // 新增修改组件
      isAdd: true,
      tableData: [],
      areaTreeList: [],
      employeeTreeList: [],
      qualiTreeList: [],
      saleOptions: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      areaTreeProps: {
        children: 'children',
        label: 'name'
      },
      qualiTreeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  methods: {
    isAuth (auth) {
      return isAuth(auth)
    },
    // 获取用户信息
    getUserInfoReq () {
      getUserInfo(({user}) => { this.userInfo = user })
    },
    // 判断当前什么组件
    componentIs (val) {
      return this.componentFlag === val
    },
    // 初始化params
    initParmas () {
      Object.keys(this.params).forEach((key) => { this.params[key] = '' })
      this.params.regularFlag = null
      this.params.qualiIdList = []
      this.params.gradeTagList = []
    },
    // 更改组件显示
    changeComponent (to) {
      this.componentFlag = to
      this.paging()
    },
    // 更改isAdd状态
    changeIsAddState (state) {
      this.isAdd = state
    },
    refreshData () {
      this.initParmas()
      this.paging()
    },
    paging () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/ent/customer/paging'),
        method: 'post',
        data: this.$http.adornData({
          'conditions': {
            'typeId': 3,
            'enterpriseFlag': 1,
            // 'followUserId': this.params.followUserId,
            'name': this.params.name,
            'areaId': this.params.areaId,
            'cityId': this.params.cityId,
            'certificateCode': this.params.certificateCode,
            'regularFlag': this.params.regularFlag,
            'qualiIdList': this.params.qualiIdList,
            'areaSaleId': this.params.areaSaleId,
            'saleId': this.params.saleId,
            'deptId': this.params.deptId,
            'areaSaleDeptId': this.params.areaSaleDeptId,
            // 'qualiIdList': [],
            'gradeTagList': this.params.gradeTagList
          },
          'inOrder': '',
          'orderBy': '',
          'pageNum': this.queryInfo.pageIndex,
          'pageSize': this.queryInfo.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          data.data.records.forEach((item) => { item.cityArea = `${item.cityName} ${item.areaName}` })
          this.tableData = data.data.records
          this.totalPage = data.data.total
        } else {
          this.$message.error(data.msg)
        }
      }).finally(() => { this.dataListLoading = false })
    },
    // 点击重置
    clickReset () {
      this.$refs['paramsRefs'].resetFields()
      this.initParmas()
      this.selectedQuailName = ''
      this.employeeSelectValue = ''
      this.areaSelectValue = ''
      this.paging()
    },
    // 获取区域列表（树形）
    getAreaTree () {
      getRegionTree({'actionId': 2}, ({data}) => { this.areaTreeList = data })
    },
    // 获取部门人员列表（树形）
    getEmployeeTree (action = 2) {
      getDepartTree(
        action,
        ({data}) => {
          this.transformEmployeeTreeData(data)
          this.employeeTreeList = data
        }
      )
    },
    // 部门人员数据转换为符合组件使用的类型
    transformEmployeeTreeData (data = []) {
      if (data) {
        data.forEach((item) => {
          item.name = item.deptName
          if (item.children && item.userList) {
            this.transformEmployeeTreeData(item.children)
            item.children = item.children.concat(item.userList)
          } else if (!item.children && item.userList) {
            item.children = item.userList
          }
        })
      }
    },
    clearQuail () {
      this.params.qualiIdList = []
      this.params.gradeTagList = []
      this.getQualiTreeReq()
      this.clickSearch()
    },
    getQualiTreeReq () {
      getQualiTree(({data}) => {
        this.transformQualiTreeData(data)
        this.qualiTreeList = data
      })
    },
    transformQualiTreeData (data = []) {
      if (data) {
        data.forEach((item) => {
          item.name = item.grade
          item.children = item.qualiList
          if ('gradeTag' in item) {
            // 将父节点置为负数唯一标识不提交请求
            item.id = 0 - 1 - item.gradeTag
          }
        })
      }
    },
    qualiTreeCheckChange () {
      let selectedNodes = this.$refs.qualiTreeRefs.getCheckedNodes()
      // console.log('node', selectedNodes)
      let notLeafNodes = []
      let leafNodes = this.$refs.qualiTreeRefs.getCheckedNodes(true)
      if (selectedNodes) {
        notLeafNodes = selectedNodes.filter((item) => item.id < 0)
      }
      if (leafNodes) {
        this.selectedQuailName = leafNodes.map((item) => item.name)
      }
      this.params.qualiIdList = this.$refs.qualiTreeRefs.getCheckedKeys(true)
      this.params.gradeTagList = notLeafNodes.map(item => item.gradeTag)
      this.clickSearch()
    },
    // 批量转让
    transferBatch () {
      transferBatch({
        'customerIdList': this.customerIdList,
        'userId': this.employeeId
      }, () => { this.paging() })
      this.selectEmployeeTransferDialogVisible = false
    },

    clickConfirmTransfer () {
      this.transferBatch()
      this.selectEmployeeTransferDialogVisible = false
    },
    employeeTransferHandleNodeClick (node) {
      this.employeeId = node.id
    },
    // table多选监听
    handleSelectionChange (selection) {
      this.customerIdList = selection.map(item => item.id)
    },
    gettypeOptions () {
      return incomeType.filter(item => item.id !== 2)
    },
    showTurnToFinishDialog (row) {
      this.cooperationForm.customerId = row.id
      this.cooperationForm.name = row.name
      // this.typeOptions = this.gettypeOptions()
      this.cooperationDialogVisible = true
    },
    cooperationDialogVisibleChange (val) {
      this.cooperationDialogVisible = val
    },
    // 转成交
    turnToFinish (row) {
      this.$confirm(`确认要把"${row.name}"转为"成交客户"?`, '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        turnToFinish(row.id, () => { this.paging() })
      })
    },
    // 转意向
    turnToPossible (row) {
      this.$confirm(`确认要把"${row.name}"转为"意向客户"?`, '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        turnToPossible(row.id,
          () => {
            this.paging()
            this.$message.success('转意向成功！')
          })
      })
    },
    // 刪除
    clickDelete (row) {
      this.$confirm(`确认要删除"${row.name}"吗?`, '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        deleteCustomer(row.id, () => { this.paging() })
      })
    },
    showSelectEmployeeDialog (action) {
      this.getEmployeeTree(action)
      this.selectEmployeeDialogVisible = true
    },

    // 选择部门对话框
    employeeHandleNodeClick (nodeObj, node) {
     // 只选择人
/*      if (node.isLeaf && !node.data.deptName) {
        this.employeeSelectValue = node.data.name
        this.params.followUserId = node.data.id
      } */
      // 部门和人都可选择
      this.employeeSelectValue = node.data.name
      if (node.isLeaf) {
        // this.params.deptId = null
        this.params.areaSaleDeptId = null
        // this.params.followUserId = node.data.id
        this.params.areaSaleId = node.data.id
      } else {
        // this.params.followUserId = null
        this.params.areaSaleId = null
        // this.params.deptId = node.data.id
        this.params.areaSaleDeptId = node.data.id
      }
    },
    clearEmployee () {
      // this.params.followUserId = ''
      this.params.areaSaleId = null
      this.params.areaSaleDeptId = null
      this.clickSearch()
    },
    clearName () {
      this.clickSearch()
    },
    clearCertificateCode () {
      this.clickSearch()
    },
    areaHandleNodeClick (nodeObj, node) {
      // console.log('nodeObj', nodeObj)
      // console.log('node', node)
      this.areaSelectValue = node.data.name
      if (node.isLeaf) {
        this.params.cityId = ''
        this.params.areaId = node.data.id
      } else {
        this.params.areaId = ''
        this.params.cityId = node.data.id
      }
    },

    clearArea () {
      this.params.areaId = ''
      this.params.cityId = ''
      this.clickSearch()
    },
    // 显示新增更新组件
    showAddOrUpdateComp (isAdd, component) {
      this.changeComponent(component)
      this.isAdd = isAdd
    },
    clickShowDetails (component, row) {
      this.changeComponent(component)
      this.id = row.id
    },
    // 选择区域对话框
    clickAreaNode (data) {
    },
    clickCancel () {
      this.selectAreaDialogVisible = false
    },
    showSelectAreaDialog () {
      this.getAreaTree()
      this.selectAreaDialogVisible = true
    },
    showSelectEmployeeTransferDialog () {
      this.getEmployeeTree(1)
      this.selectEmployeeTransferDialogVisible = true
    },
    // 上传头部
    uploadHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
    },
    uploadUrl () {
      return this.$http.adornUrl('/ent/customer/file/upload')
    },
    // 上传成功监听函数
    successUpload (response, file, fileList) {
      let fileUrl = ''
      if (response.code === 0) {
        let data = response.data
        fileUrl = data.remoteUrl + data.fileName
        this.cooperationForm.fileUrl = fileUrl
        this.cooperationForm.fileName = file.name
      }
    },
    // 文件改变监听函数
    changeUpload (file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // 点击上传
    clickUpdate () {
      let formData = {
        'description': this.cooperationForm.description,
        'income': this.cooperationForm.income,
        'incomeDate': this.cooperationForm.incomeDate,
        'detail': this.cooperationForm.detail,
        'fileName': this.cooperationForm.fileName,
        'fileUrl': this.cooperationForm.fileUrl,
        'typeId': this.cooperationForm.typeId,
        'perfor': this.cooperationForm.perfor,
        'customerId': this.cooperationForm.customerId
      }
      if (this.cooperationForm.customerId) {
        this.$refs.cooperationForm.validate((valid) => {
          if (valid) {
            addCooperation(formData, (data) => {
              this.$message.success('转让成功')
              this.cooperationDialogVisible = false
              this.paging()
            })
          }
        })
      }
    },
    clickExport () {
      let data = {'typeId': 3, 'enterpriseFlag': 1, ...this.params}
      let fileName = '区域名单'
      // console.log('daa')
      customerExport(data, fileName)
    },
    // 把表格固定行添加右分隔线
    cellStyle ({row, column, rowIndex, columnIndex}) {
      // console.log('columnIndex', columnIndex)
      if (columnIndex === 3) {
        return 'borderLeft:2px solid #6E92E9'
      } else {
        return ''
      }
    },
    clearSale () {
      this.params.saleId = ''
      this.clickSearch()
    },
    getSaleListReq () {
      let dataForm = {
        'nickName': '',
        'name': '',
        'areaManagerFlag': 0
      }
      getUserList(dataForm, (data) => {
        this.saleOptions = data.data
      })
    },
    clickSelectAreaSearch () {
      this.clickSearch()
      this.selectAreaDialogVisible = false
    },
    clickSelectEmployeeSearch () {
      this.clickSearch()
      this.selectEmployeeDialogVisible = false
    }
  }
}
</script>
